<template>
  <el-row
    type="flex"
    justify="space-between"
    style="height: 50px; width: 100%"
    align="middle"
  >
    <el-col>
      <span class="sp-title">
        <i v-if="isRoot" class="el-icon-office-building" />
        {{ treeNode.name }}
      </span>
    </el-col>
    <!-- <el-col>
      <span>{{ treeNode.name }}</span>
    </el-col> -->
    <el-col :span="4">
      <el-row type="flex" justify="end">
        <el-col>
          <span>
            <i :class="!isRoot ? 'el-icon-user' : 'el-icon-s-custom'" />
            {{ treeNode.manager }}</span
          >
        </el-col>
        <el-col>
          <el-dropdown @command="operateDepts">
            <span class="el-dropdown-link">
              <i class="el-icon-setting" />
              操作
              <i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item v-if="!isRoot" command="edit"
                >编辑部门</el-dropdown-item
              >
              <el-dropdown-item v-if="!isRoot" command="del"
                >删除部门</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { delDepartments } from '@/api/departments'
export default {
  name: 'TreeTools',
  // 要求用户在使用 tree-tools 组件的时候，传入一个数据(对象)
  props: {
    treeNode: {
      type: Object,
      required: true,
      default: () => {}
    },
    // 是否是根部门(有一个默认值，默认不是根部门)
    isRoot: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    async operateDepts (type) {
      if (type === 'add') {
        // 添加子部门
        this.$emit('addDepts', this.treeNode)
      } else if (type === 'edit') {
        // 编辑部门
        this.$emit('editDepts', this.treeNode)
      } else {
        // 删除部门
        try {
          await this.$confirm('确定删除吗？')
          // alert('确定')
          await delDepartments(this.treeNode.id)
          this.$emit('update-list')
          // 提示用户删除成功
          this.$message.success('删除部门成功')
        } catch (error) {
          this.$message.info('取消了删除')
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.sp-title {
  display: flex;
  align-content: center;
}

.el-icon-office-building,
.el-icon-user,
.el-icon-s-custom,
.el-icon-setting {
  font-size: 16px;
  margin-right: 5px;
}
</style>
